<template>
  <div class="app">
    <h1>签到日历</h1>
    <div class="calendar">
      <div class="calendar-header">
        <span>{{ currentMonth }} {{ currentYear }}</span>
      </div>
      <div class="calendar-grid">
        <div v-for="day in daysInMonth" :key="day.date" class="calendar-day">
          <div
            :class="['day', { signed: isSigned(day.date) }]"
            @click="handleSign(day.date)"
          >
            {{ day.date }}
          </div>
        </div>
      </div>
    </div>

    <div class="calendar-controls">
      <button @click="handleSign(currentDate.getDate())">签到</button>
    </div>

    <div v-if="dialogVisible" class="dialog">
      <p>{{ dialogMessage }}</p>
	  <router-link to="/pages/mine/mine">
      <button @click="dialogVisible = false">关闭</button>
	  </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      dialogVisible: false,
      dialogMessage: '',
    };
  },
  computed: {
    currentMonth() {
      const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      return monthNames[this.currentDate.getMonth()];
    },
    currentYear() {
      return this.currentDate.getFullYear();
    },
    daysInMonth() {
      const firstDayOfMonth = new Date(this.currentYear, this.currentDate.getMonth(), 1);
      const lastDayOfMonth = new Date(this.currentYear, this.currentDate.getMonth() + 1, 0);
      const days = [];
      for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
        days.push({ date: i });
      }
      return days;
    }
  },
  methods: {
    handleSign(date) {
      const dateString = `${this.currentYear}-${this.currentDate.getMonth() + 1}-${date}`;
      if (this.isSigned(dateString)) {
        this.dialogMessage = `今天（${dateString}）签到成功，啥也没得到！`;
      } else {
        this.dialogMessage = `今天（${dateString}）签到成功！`;
        this.signIn(dateString);
      }
      this.dialogVisible = true;
    },
    isSigned(date) {
      const signedDates = this.getItem('signedDates') || [];
      return signedDates.includes(date);
    },
    signIn(date) {
      const signedDates = this.getItem('signedDates') || [];
      if (!signedDates.includes(date)) {
        signedDates.push(date);
        this.setItem('signedDates', signedDates);
      }
    },
    getItem(key) {
      try {
        const value = localStorage.getItem(key);
        return value ? JSON.parse(value) : [];
      } catch (e) {
        console.error("获取数据失败", e);
        return [];
      }
    },
    setItem(key, value) {
      try {
        localStorage.setItem(key, JSON.stringify(value));
      } catch (e) {
        console.error("设置数据失败", e);
      }
    }
  }
};
</script>
this.$router.replace('/pages/mine/mine"')
<style scoped>
.app {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

.calendar {
  display: inline-block;
  text-align: left;
}

.calendar-header {
  margin-bottom: 10px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

.calendar-day {
  display: inline-block;
  text-align: center;
}

.day {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  background-color: #f0f0f0;
}

.day.signed {
  background-color: #4CAF50;
  color: white;
}

.calendar-controls {
  margin-top: 20px;
}

.calendar-controls button {
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  font-size: 16px;
  background-color: #55aaff;
  color: white;
  border: none;
  border-radius: 5px;
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
